{% extends 'base_children.html' %}
{% block self_head %}

    <link rel="stylesheet" href="/static/larryms/thirdlib/formSelects-v4.css">
    {#<script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/ace.js"></script>#}
    {#    <script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/ext-language_tools.js"></script>#}
    {#   <script src="https://cdnjs.cloudflare.com/ajax/libs/ace/1.4.1/mode-mysql.js"></script>#}
    {#    <script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/mode-python.js"></script>#}
    {#    <script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/mode-sql.js"></script>#}
    {#    <script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/mode-yaml.js"></script>#}
    {#    <script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/mode-sh.js"></script>#}
    {##}
    {##}
    {#    <script src="/static/larryms/plus/ace-1.4.2/src-min-noconflict/theme-monokai.js"></script>#}



    <style type="text/css">
        #editor {
            /* position: absolute; */
            width: 100%;
            height: 400px;

        }
    </style>
{% endblock %}
{% block content %}
    <div class="layui-fluid form-demo-box">


        <div class="layui-row">
            <div class="layui-col-lg7">

                <form class="layui-form layui-form-pane" id="ansiblescriptRun" lay-filter="layui-form"
                      action="{% url 'mysql_deploy_single_soft' %}">
                    {% csrf_token %}
                    <div class="layui-form-item">
                        <label class="layui-form-label">作业名称</label>
                        <div class="layui-input-block">
                            <input name="job_name" class="layui-input" value="mysql_deploy_soft_{{ time_now }}" required>
                        </div>
                    </div>
                    <input type="hidden" class="form-control" id="ans_uuid" name="ans_uuid" value="{{ ans_uuid }}">


                    <section>

                        <div class="layui-card">
                            <div class="layui-card-header">
                                <strong>配置信息</strong>
                            </div>
                            <div class="layui-card-body" style="height: 500px;">

                                <div class="layui-form-item">
                                    <label class="layui-form-label">产品线</label>
                                    <div class="layui-input-block">
                                        <select name="prod_line" xm-select='prod_line' xm-select-radio>
                                            <option value="">联动多选</option>
                                        </select>
                                        {#                                             <input type="text" id="yewuxian" class="layu=3i-input" readonly="readonly">#}
                                    </div>
                                </div>
                                <div class="layui-form-item">
                                    <label class="layui-form-label">目标机器</label>
                                    <div class="layui-input-block">
                                        <select name='dest_hosts' id="select_host" xm-select='select_host'
                                                xm-select-radio layui-verefy="required">
                                            <option value="">选择一个服务器</option>
                                        </select>

                                    </div>
                                </div>


                                    <div class="layui-form-item">
                                        <label class="layui-form-label">mysql版本</label>
                                        <div class="layui-input-inline">
                                            <select name='mysql_version'    layui-verefy="required">
                                            <option value="">请选择版本</option>
                                                <option value="mysql5.7">mysql5.7</option>
                                                <option value="mysql8.0">mysql8.0</option>
                                        </select>
                                        </div>
                                    </div>

                                <button type="button" class="layui-btn layui-btn-green" lay-submit=""
                                        lay-filter='runjob' id="run_ansible_model">开始执行
                                </button>

                                <p>新机器必须优先部署 数据库软件，这个自己把握，请勿频繁考验代码健壮性</p>
                                <p>选择好主机，会自动判断操作系统，下载二进制文件到对应的目录</p>
                                <p>标准化安装到 /usr/local/mysql 目录下</p>
                                <p>并且会部署给 mysql 用户的profile ，root 无法调用</p>
                            </div>

                        </div>

                    </section>
                </form>
            </div>

            <div class="layui-col-lg5">

                <section>
                    <div class="layui-card">
                        <div class="layui-card-header">

                            <strong>执行结果</strong>

                        </div>
                        <div class="layui-card-body layui-bg-black">

                            <div class="html">
                                <div id="result">
                                </div>
                            </div>
                        </div>

                    </div>
                </section>
            </div>
        </div>


    </div>




{% endblock %}
{% block self_foot %}

    <script type="text/javascript">
        layui.config({
            version: "2.0.8",
            base: '/static/larryms/',
            layertype: 2
        }).extend({
            larry: 'js/base'
        }).use(['larry', 'layer', 'jquery', 'larryms', 'form', 'formSelects', 'upload'], function () {
            var $ = layui.$,
                larry = layui.larry,
                form = layui.form,
                layer = layui.layer,
                formSelects = layui.formSelects,
                upload = layui.upload,
                larryms = layui.larryms;

            {#var curIfr = parent.layer.getFrameIndex(window.name);#}


            form.on('submit(runjob)', function (data) {
                console.log(data.field)
                console.log(data)
                var btnObj = $(data.elem);
                {#btnObj.attr('disabled', true);#}

                $.ajax({
                    dataType: "text",
                    url: data.form.action, //请求地址
                    type: "POST",  //提交类似
                    {#contentType: "application/json",#}
                    data: data.field,  //提交参数
                    success: function (res) {
                        res2 = JSON.parse(res);
                        console.log(res);
                        if (res2.code == 200) {
                            clearInterval(interval);
                            larryms.msg(res2.msg);
                        }
                        ;
                        if (res2["code"] === 500) {
                            larryms.msg(res2.msg);
                        }

                    },
                    error: function (response) {
                        larryms.msg("运行失败,时间超时了");
                        clearInterval(interval);
                    }
                });


                $("#result").html("服务器正在处理，请稍等。。。");
                /* 轮训获取结果 开始  */
                var interval = setInterval(function () {
                    $.ajax({
                        url: '{% url 'get_ans_run_result' %}',
                        type: 'post',
                        data: data.field,
                        success: function (result) {
                            if (result["msg"] !== null) {
                                $("#result").append("<p>" + result["msg"] + "</p>");
                                {#document.getElementById("scrollToTop").scrollIntoView();#}
                                if (result["msg"].indexOf("[Done]") == 0) {
                                    clearInterval(interval);
                                    larryms.msg("Ansible执行完成");
                                    btnObj.removeAttr('disabled');
                                }
                            }
                        },
                        error: function (response) {
                            btnObj.removeAttr('disabled');
                            clearInterval(interval);
                        }
                    });
                }, 50);  //一秒钟运行2此


            });

            formSelects.config('prod_line', {
                type: 'get',                //ÇëÇó·½Ê½: post, get, put, delete...
                header: {},                 //×Ô¶¨ÒåÇëÇóÍ·
                data: {},                   //×Ô¶¨Òå³ýËÑË÷ÄÚÈÝÍâµÄÆäËûÊý¾Ý
                searchUrl: '{% url 'get_json_tree' %}',
                searchName: 'keyword',      //×Ô¶¨ÒåËÑË÷ÄÚÈÝµÄkeyÖµ
                searchVal: '',              //×Ô¶¨ÒåËÑË÷ÄÚÈÝ, ËÑËØÒ»´ÎºóÊ§Ð§, ÓÅÏÈ¼¶¸ßÓÚËÑË÷¿òÖÐµÄÖµ
                keyName: 'name',            //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐnameµÄkey, Ä¬ÈÏ name
                keyVal: 'value',            //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐvalueµÄkey, Ä¬ÈÏ value
                keySel: 'selected',         //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐselectedµÄkey, Ä¬ÈÏ selected
                keyDis: 'disabled',         //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐdisabledµÄkey, Ä¬ÈÏ disabled
                keyChildren: 'children',    //Áª¶¯¶àÑ¡×Ô¶¨Òåchildren
                delay: 500,                 //ËÑË÷ÑÓ³ÙÊ±¼ä, Ä¬ÈÏÍ£Ö¹ÊäÈë500msºó¿ªÊ¼ËÑË÷
                direction: 'down',          //¶àÑ¡ÏÂÀ­·½Ïò, auto|up|down
                response: {
                    statusCode: 0,          //³É¹¦×´Ì¬Âë
                    statusName: 'code',     //code key
                    msgName: 'msg',         //msg key
                    dataName: 'data'        //data key
                },
                success: function (id, url, searchVal, result) {      //Ê¹ÓÃÔ¶³Ì·½Ê½µÄsuccess»Øµ÷
                    console.log(id);        //×é¼þID xm-select
                    console.log(url);       //URL
                    console.log(searchVal); //ËÑË÷µÄvalue
                    console.log(result);    //·µ»ØµÄ½á¹û
                },
                error: function (id, url, searchVal, err) {           //Ê¹ÓÃÔ¶³Ì·½Ê½µÄerror»Øµ÷
                    //
                    console.log(err);   //err¶ÔÏó
                },
                beforeSuccess: function (id, url, searchVal, result) {

                    result.data = JSON.parse(result.data)
                    return result;  //±ØÐëreturnÒ»¸ö½á¹û, Õâ¸ö½á¹ûÒª·ûºÏ¶ÔÓ¦µÄÊý¾Ý½á¹¹
                },
                beforeSearch: function (id, url, searchVal) {         //ËÑË÷Ç°µ÷ÓÃ´Ë·½·¨, return true½«´¥·¢ËÑË÷, ·ñÔò²»´¥·¢
                    if (!searchVal) {//Èç¹ûËÑË÷ÄÚÈÝÎª¿Õ,¾Í²»´¥·¢ËÑË÷
                        return false;
                    }
                    return true;
                },
                clearInput: false,          //µ±ÓÐËÑË÷ÄÚÈÝÊ±,  µã»÷Ñ¡ÏîÊÇ·ñÇå¿ÕËÑË÷ÄÚÈÝ, Ä¬ÈÏ²»Çå¿Õ
            }, true);
            formSelects.data('prod_line', 'server', {
                url: '{% url 'get_json_tree' %}',

                linkage: true,
                linkageWidth: 130,
                keyChildren: 'children',
                keyName: 'name',
                keyVal: 'value',
                success: function (result) {
                    console.log(result);
                },
                error: function (err) {           //Ê¹ÓÃÔ¶³Ì·½Ê½µÄerror»Øµ÷
                    //Í¬ÉÏ
                    console.log(err);   //err¶ÔÏó
                },


            });

            formSelects.on('prod_line', function (id, vals, val, isAdd, isDisabled) {
                var hostids = '';
                for (var i in vals) {
                    var hostname = vals[i].name.split('/').pop();
                    var hostid = vals[i].value.split('/').pop();
                    if (hostname === 'host') {
                        $('#select_host option:selected').empty();

                        if (hostid > 0) {

                            formSelects.config('select_host', {
                                type: 'get',                //ÇëÇó·½Ê½: post, get, put, delete...
                                header: {},                 //×Ô¶¨ÒåÇëÇóÍ·
                                data: {},                   //×Ô¶¨Òå³ýËÑË÷ÄÚÈÝÍâµÄÆäËûÊý¾Ý
                                searchUrl: '',           //ËÑË÷µØÖ·, Ä¬ÈÏÊ¹ÓÃxm-select-searchµÄÖµ, ´Ë²ÎÊýÓÅÏÈ¼¶¸ß
                                searchName: 'keyword',      //×Ô¶¨ÒåËÑË÷ÄÚÈÝµÄkeyÖµ
                                searchVal: '',              //×Ô¶¨ÒåËÑË÷ÄÚÈÝ, ËÑËØÒ»´ÎºóÊ§Ð§, ÓÅÏÈ¼¶¸ßÓÚËÑË÷¿òÖÐµÄÖµ
                                keyName: 'name',            //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐnameµÄkey, Ä¬ÈÏ name
                                keyVal: 'value',            //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐvalueµÄkey, Ä¬ÈÏ value
                                keySel: 'selected',         //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐselectedµÄkey, Ä¬ÈÏ selected
                                keyDis: 'disabled',         //×Ô¶¨Òå·µ»ØÊý¾ÝÖÐdisabledµÄkey, Ä¬ÈÏ disabled

                                delay: 500,                 //ËÑË÷ÑÓ³ÙÊ±¼ä, Ä¬ÈÏÍ£Ö¹ÊäÈë500msºó¿ªÊ¼ËÑË÷
                                direction: 'auto',          //¶àÑ¡ÏÂÀ­·½Ïò, auto|up|down
                                response: {
                                    statusCode: 0,          //³É¹¦×´Ì¬Âë
                                    statusName: 'code',     //code key
                                    msgName: 'msg',         //msg key
                                    dataName: 'data'        //data key
                                },
                                success: function (id, url, searchVal, result) {      //Ê¹ÓÃÔ¶³Ì·½Ê½µÄsuccess»Øµ÷
                                    console.log(id);        //×é¼þID xm-select
                                    console.log(url);       //URL
                                    console.log(searchVal); //ËÑË÷µÄvalue
                                    console.log(result);    //·µ»ØµÄ½á¹û
                                },
                                error: function (id, url, searchVal, err) {           //Ê¹ÓÃÔ¶³Ì·½Ê½µÄerror»Øµ÷
                                    //
                                    console.log(err);   //err¶ÔÏó
                                },
                                beforeSuccess: function (id, url, searchVal, result) {

                                    result.data = JSON.parse(result.data)
                                    return result;  //±ØÐëreturnÒ»¸ö½á¹û, Õâ¸ö½á¹ûÒª·ûºÏ¶ÔÓ¦µÄÊý¾Ý½á¹¹
                                },
                                beforeSearch: function (id, url, searchVal) {         //ËÑË÷Ç°µ÷ÓÃ´Ë·½·¨, return true½«´¥·¢ËÑË÷, ·ñÔò²»´¥·¢
                                    if (!searchVal) {//Èç¹ûËÑË÷ÄÚÈÝÎª¿Õ,¾Í²»´¥·¢ËÑË÷
                                        return false;
                                    }
                                    return true;
                                },
                                clearInput: false,          //µ±ÓÐËÑË÷ÄÚÈÝÊ±, µã»÷Ñ¡ÏîÊÇ·ñÇå¿ÕËÑË÷ÄÚÈÝ, Ä¬ÈÏ²»Çå¿Õ
                            }, true);
                            formSelects.data('select_host', 'server', {
                                url: '/cmdb/get_json_tree_host/' + hostid,

                            });
                        }
                        ;

                    }
                    else {
                        larryms.alert('最后的节点要是host，才能选出主机奥');
                        formSelects.value('prod_line', [vals[i].value], false);//删掉这个值
                    }
                    console.log(hostname);
                    console.log(hostid)

                }
                ;
            }, true);


        });


    </script>
{% endblock %}